<template>
    <section class="box" style="overflow:hidden; border-bottom: 3px solid #409EFF;">
        <div>
            <div style="margin:0  30px;">
                <div class="demo-collapse">
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item :title="title" name="1">
                            <div class="row">
                                <div class="col-xs-12 mt-5">
                                    <slot name="tool"></slot>
                                    <button v-if="buttonText" type="button"
                                        class="btn btn-primary btn-lg mt-20 has-gradient-to-right-bottom"
                                        @click="handleButtonClick">
                                        {{ buttonText }}
                                    </button>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
    </section>
</template>
<script>

export default {
    
    props: {
        tabItems: {
            type: Array,
            default: () => []
        },
        buttonText: {
            type: String,
            default: ''
        },
        buttonAction: {
            type: Function,
            default: () => { }
        },
        title: {
            type: String,
            required: true
        }
    },

    data() {
        return {

            activeNames: ['1'],

        }
    }
}
</script>
<style>
@import "@/views/personalCenter/css/index.css";
</style>